/*btns*/
.btn01{
    padding:10px 35px;
    line-height: 1;
    background:#f44545;
    color:#fff;
    border-radius: 5px;
    &:hover{
        background:#ea3636;
    }
}


/*header*/
.header{min-width:1200px; height:80px; background:#fff; position: relative; z-index: 999;}
.header-logo{width:351px; height:48px; display: block; margin-top:16px;}
.header-nav{margin-right:20px; display: inline;}
.header-nav li{float:left; margin:0 10px; display: inline; position: relative;}
.header-nav li a{height:74px; line-height: 74px; padding:0 12px; display: block; border-bottom: 6px solid #fff; font-size:16px;}
.header-nav li a:hover{color:#da0d0d;}
.header-nav li a.active{border-color:#da0d0d; color:#da0d0d;}
.header-nav .sub-nav{width:110px; position: absolute; display: none; left:50%; margin-left:-55px; top:58px; z-index: 10; border-radius: 3px;  border:1px solid #ddd;}
.header-nav .sub-nav li{float: none; height:35px; line-height: 35px; margin:0; display: block;}
.header-nav .sub-nav a{height:35px; line-height: 35px; font-size:14px; border-bottom: 0; padding:0 0 0 20px;}
.header-nav .drop:after{ content: ""; position: absolute; right: 0; top: 45%; border-left: 4px solid transparent; border-top: 4px solid #333;  border-right: 4px solid transparent; z-index: 999;}
.header-nav .sub-nav:before{content:""; position:absolute; width:13px; height:7px; display: block; background:url(../images/sub_nav_arrow.png) no-repeat; top:-5px; left:50%; margin-left:-6px; z-index: 1;}
.header-nav .sub-nav ul{position: relative; z-index: 2; background: #fff;}
.header-nav li:hover .drop:after,.header-nav li .drop.active:after{border-top: 4px solid #da0d0d;}
.header-login-reg{margin-top:30px; border-left:1px solid #e6e6e6; padding-left:21px;}
.header-user{margin-top:20px; border-left:1px solid #e6e6e6; padding-left:40px;}
.header-user .sculpture{width:36px; height:36px; overflow: hidden; border-radius: 50%;}
.header-user .sculpture img{width:100%; height:100%; }
.header-user .name{margin-top:8px;}
.header-login-reg li{ font-size:16px;}
.header-login-reg a{margin:0 15px; display: block;}
.header-login-reg .a1{color:#da0d0d;}
.header-login-reg .a2{color:#0096f5;}


/* footer */
.footer{ width:100%; min-width:1200px; background:#2a333a; position: relative; }
.footer-menu{ width:150px; float:left; padding-top:35px;
    .select-item{ width:100%; height:35px; border:1px solid #9a9ea1; position: relative; margin-top:30px;
    }
    .list{ display:none; position: absolute; left:-1px; bottom:35px; width:100%; height:100px; overflow:auto; background:#2a333a; border:1px solid #9a9ea1; z-index: 999;
        li{ line-height: 35px; text-align: center;
            a{ color:#bcbcbc; display: block; transition: 300ms all;
                &:hover{ color:#fff; }
            }
        }
    }
    .show-btn{ width:52px; height:35px; display: block; position: absolute; top:0; right:0; text-align: center; line-height: 35px; color:#9a9ea1; text-indent:0; }
    dt { position:relative; line-height: 35px; text-indent:20px; color:#bcbcbc; cursor: pointer; }
}
.footer-concat{float:left;padding-top:35px;margin-left:80px;
    h2{font-size:18px;font-weight:bold;color:#fff;}
    .concat-info{ color:#bcbcbc; margin-top:20px;
        .iconfont{ font-size:12px; vertical-align: middle; margin-right:5px; }
        span{ margin-right:30px; }
    }
    .safe-link{ margin-top:23px; position:relative;
        img { width:480px; height:auto; }
        a { position:absolute; top:0; left:0; display:block; height:28px; width:75px; }
        .safe-a1 {}
        .safe-a2 { left:325px; width:88px; }
        .safe-a3 { left:422px; width:58px; }
    }
}
.footer-copyright{ line-height: 70px; border-top:1px solid #373f46; margin-top:30px;
    .map{
        a{ margin:0 10px; transition:300ms all;
            &:hover{color:#fff; }
        }
    }
}


/**
 * 清除浮动
 */
.clearfix:after {content:" ";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{*zoom:1;}


/**
 * 通用样式
 */
body{font-family: "microsoft yahei","微软雅黑"; background:#ebebeb; overflow-x: hidden;}
.layout{width:1200px; margin:0 auto;}
.fl{float:left;}
.fr{float:right;}
.pb-0{padding-bottom: 0 !important;}
.fs-12{font-size:12px;}
.fs-16{font-size: 16px;}
.fs-18{font-size: 18px;}
.fs-24{font-size:24px;}
.fs-30{font-size:30px;}
.mt-5{margin-top:5px;}
.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-50{margin-top:50px;}
.ml-5{margin-left: 5px;}
.ml-10{margin-left: 10px;}
.ml-20{margin-left: 20px;}
.ml-75{margin-left:75px;}
.ml-85{margin-left:85px;}
.mb-10{margin-bottom: 10px;}
.mb-20{margin-bottom: 20px;}
.mb-30{margin-bottom: 30px;}
.lh-36{line-height: 36px;}
.c-red{color:#da0d0d;}
.c-blue{color:#0096f5;}
.c-888{color:#888;}
.c-green{color:#26c452;}
.c-d2{color:#d2d2d2;}
.text-center{text-align: center;}
.bold{font-weight: bold;}
.inline-block{display: inline-block;}
.middle{vertical-align: middle;}
.text-left{}
/**
 * 顶部条
 */
.top-bar{width:100%; min-width: 1200px; position: relative; z-index: 9999; height:29px; line-height: 29px; font-size:12px; background:#f5f5f5; color:#888;}
.top-bar a{color:#888;}
.top-bar a:hover{color:#ff9d28;}
.top-bar-home{background:url(../images/tel-icon.png) left center no-repeat; padding-left: 24px;}
.top-bar-wechart{ margin-right:10px; width:16px; height:14px; vertical-align: middle; display: inline-block; position: relative; background: url(../images/wechart-icon.png) left center no-repeat;}
.top-bar-wechart span{position: absolute; width: 200px; height:100px; transition: all .3s; opacity: 0;  top:30px; left:-35px; visibility: hidden; z-index: 99; -moz-box-shadow:0px 2px 5px #4F4F4F; -webkit-box-shadow:0px 2px 5px #4F4F4F; box-shadow:0px 2px 5px #4F4F4F;}
.top-bar-wechart span img { float: left; width:100px; height: 100px; margin:0; }
.top-bar-wechart:hover span{visibility: inherit; opacity: 1;}
.top-bar-wb{width:16px; height:14px; display: inline-block; vertical-align: middle; position: relative; background: url(../images/wb-icon.png) left center no-repeat;}
.top-bar-wb span{position: absolute; width: 100px; height:100px; transition: all .3s; opacity: 0;  top:30px; left:-35px; visibility: hidden; z-index: 99; -moz-box-shadow:0px 2px 5px #4F4F4F; -webkit-box-shadow:0px 2px 5px #4F4F4F; box-shadow:0px 2px 5px #4F4F4F;}
.top-bar-wb:hover span{visibility: inherit; opacity: 1;}
.top-bar .line{margin:0 8px;}


/**
 * 常用按钮渐变
 */
.btn{ background:$red; display: block; width:100%; color:#fff; text-align: center; cursor: pointer; }
.btn-small{ font-size: 14px; height:36px; border-radius: 4px; line-height: 36px; transition:all 0.2s; }
.filter-search,.form-group-submit,.buy-btn{position: relative}
.btn-tex{
    position: absolute;
    top: 6px;left: 38px;
    color:#fff;
}
.btn-tex-big{
    position: absolute;
    top: 18px;left: 41%;
    color:#fff;
}
.btn-small:hover,.btn-big:hover{
    @extend .boxshadow;
}
.btn-big{
    height:54px;
    border-radius: 54px;
    line-height: 54px;
    -webkit-transition:all 0.2s;
    transition:all 0.2s;
}

.btn-disabled{background:#ccc; box-shadow: none; color:#333;}


.btn02{display: inline-block; background:#da0d0d; text-align: center; line-height: 34px; color:#fff; width:108px; height:34px;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;}
.btn02.disabled{background:#d2d2d2;}

.btn02:hover{
    box-shadow: 0 0px 15px rgba(162,49,48,0.7);
    background-color: #a01111;
}
.btn02.disabled:hover{
    box-shadow:none;
    background:#d2d2d2;
}
.btn03{padding:10px; line-height: 1; background:#f44545; color:#fff; font-size:16px; border-radius: 3px;}
.submitbtn , .red-btn { display:block; line-height:32px; background:$red; font-size:14px; text-align:center; color:#fff; width:90px; border-radius:4px; @extend .ie-radius; }
.resetbtn , .cancelbtn { display:block; line-height:32px; background:#999; font-size:14px; text-align:center; color:#fff; width:90px; border-radius:4px; @extend .ie-radius; }

/**
 * 面包屑
 */
.bread-tag { font-size:14px; line-height: 40px; margin:10px 0;
    a { margin:0 5px;
        &:hover, &.current { color:$red; }
    }
}


// icon
.icon { background:url(../images/index/icon.png) no-repeat; }


/**
 * 内页通用样式
 */
.page-main{margin-bottom: 20px;}
.side-nav{ width:200px; float:left; background:#fff; @extend .boxshadow01; overflow:hidden;
    li { position:relative; line-height:50px; padding:0 15px 0 20px; font-size:14px;
        .mark { position:absolute; top:20px; left:-19px; width:18px; height:14px; @extend .icon; background-position:0 -300px; transition:all 0.3s ease; }
        a { border-bottom:1px dashed #e5e5e5; display:block; height:49px; color: #777; padding-right:10px; text-align:center;
            i { float:right; width:18px; height:49px; @extend .icon; background-position:-200px -280px; }
        }
        &:last-of-type a { border:none; }
        &.active {
            .mark { left:0; }
            a { color: $red; }
            i { background-position:-100px -280px; }
        }
        &:hover{
            .mark { left:0; }
            a { color: $red; }
        }
    }
}
// .side-nav a{display: block; height:55px; line-height: 55px; font-size:16px; text-align: center; border-bottom: 1px solid #ebebeb; position: relative;}
// .side-nav a.active{color:#da0d0d;}
// .side-nav a.active:after{position: absolute; content: " "; width:4px; height:100%; background:#da0d0d; display: block; top:0; left:-1px;}
// .side-nav a:hover{color:#da0d0d;}
.page-content{ width:980px; float:right; background:#fff; @extend .boxshadow01;}
.page-title{ height:55px; line-height: 55px; padding:0 20px; font-weight: bold; font-size:16px; border-bottom: 1px solid #ebebeb; color:#000; }
.page-table th{height:42px; background:#f2f6fa; font-weight: normal; color:#888;}
.page-table td{text-align: center; height:40px;}
.page-table tr:hover{background:#fffff0;}
.page-table .table-tag{width:8px; height:8px; display: inline-block; vertical-align: middle; border-radius: 50%; margin-right:5px;}
.page-table .more{color:#0096f5;}
.page-table .not-data{padding:50px 0;}
.page-table tr.no:hover{background:none;}
/**
 * 通用服务展示
 */
.m-service li{width:300px; text-align: center; float:left; padding: 95px 0 30px;}
.m-service h2{font-weight: normal;}
.m-service p{color:#888; margin-top:8px;}


/**
 * 绑定银行卡
 */
.no-card{ border:2px solid #da0d0d;}
.no-card a{display: block; padding:15px 80px;}
.no-card i{display: inline-block; width:36px; height:36px; text-align: center; line-height: 36px; background:#da0d0d; color:#fff;}
.no-card span{margin-left:10px;}


/**
 * 筛选
 */
.filter { border:1px solid #e0e0e0;  padding:20px; }
.filter li{ float:left; margin-left:20px; display: inline;}
.filter .first{color:#888; line-height: 37px;}
.filter .value .filterA{display: inline-block; padding:6px 15px; border:1px solid #fff; border-radius: 2px;}
.filter .value a.active{border-color:#da0d0d; color:#da0d0d;}
.filter .date{width:108px; height:32px; vertical-align: middle; border-radius: 2px; line-height: 37px; text-indent: 10px; border:1px solid #dbdbdb;}
.filter .filter-search{width:80px;}
.filter .select-date{line-height: 34px;}


/**
 * 消息提示
 */
.msg-info{background:#fffbd9; color:#ae8551; line-height: 24px; padding:10px 20px;}
.msg-info h2{margin-bottom: 10px;}


/**
 * 搜索框
 */
.search-input{width:335px; height:30px; border:1px solid #dbdbdb; border-radius: 2px; overflow: hidden;}
.search-input .search-txt{width:272px; height:30px; line-height: 30px; text-indent: 10px; display: block; border: none; background: none;}
.search-input .search-btn{width:62px; height:30px; background: url(../images/search-icon.png) center center no-repeat; border-left:1px solid #dbdbdb; cursor: pointer;}


/**
 * 会员页面通用表单
 */
.user-form .form-group .label,.user-form .form-group .input,.user-form .form-group .select{height:40px; box-sizing: border-box; line-height: 40px;display: block; float:left;}
.user-form .form-group{margin-bottom: 10px;}
.user-form .form-group .value,.user-form .form-group .tip{float:left; margin-left:10px; height:32px; line-height: 32px;}
.user-form .form-group .label{width:75px; text-align: right; color:#888;}
.user-form .form-group .input,.user-form .form-group .select{width:238px; border:1px solid #dbdbdb;  text-indent: 10px; display: block;}
.user-form .form-group-submit{width:238px; margin-top:20px;}
.user-form .input.input-code{width:128px; }
.user-form .send-code{width:100px; height:40px; background:#e74444; color:#fff; line-height: 40px; cursor: pointer; text-align: center; display: block; float:left; margin-left:10px;}
.user-form .send-code:hover{background-color:#da0d0d }
.user-form .form-group .input,.user-form .form-group .select{width:268px;}

/**
 * 绑定银行卡
 */
.user-form.bind-card .form-group .input,.bind-card .select-txt,.bind-card .select-box,.user-form.bind-card .form-group .select{width:330px;}
.user-form.bind-card .form-group .input-code{width:220px;}
.bind-card .bind-card-btn{width:110px; height:42px; line-height: 42px; text-align: center; display: block; float: left; border:2px solid #da0d0d; border-radius: 2px;}
.bind-card .bind-card-btn.confirm{color:#fff; background:#da0d0d; }
.bind-card .bind-card-btn.close{color:#da0d0d; background:#fff; margin-left:20px;}


/**
 * 设置结果
 */
.set-results{margin-top:80px;}
.set-results .set-results-icon{width:90px; height:90px; margin:0 auto;}
.set-results .set-results-icon.success{background: url(../images/user/set-ok.png) no-repeat;}
.set-results .msg{text-align: center; margin-top:20px;}
.set-results .go{width:240px; margin:40px auto 20px;}
.set-results .help{text-align: center;}



/**
 * 通用分页
 */
.dataTables_paginate{text-align: center; }
.ajax-pagination li,.pagination li{display:inline-block; margin:0 2px; line-height:28px; }
.ajax-pagination li.active a,.pagination li.active a ,.pagination li.active span{background:#da0d0d; color:#fff; border-color:#da0d0d;}
.ajax-pagination li a,.pagination li a,.pagination li.active a ,.pagination li.active span {padding:0 10px; border:1px solid #ddd; display: inline-block;}
.pagination{margin-top:20px;}
.pagination li.disabled{display: none;}
.pagination a{background:#fff;}

/**
 * 图片滚动
 */
.silde{position: relative;}
.silde-warp{margin:0 20px; overflow: hidden; position: relative;}
.silde ul{position: relative;}
.silde .silde-btn{position: absolute; top:90px; display: block; width:10px; height:19px;}
.silde .prev-btn{left:0; background:url(../images/silde-left-btn.png) no-repeat;}
.silde .next-btn{right:0; background:url(../images/silde-right-btn.png) no-repeat;}
.silde li{float:left; width: 186px; height:186px; margin:0 10px; border:1px solid #e5e5e5; padding:2px;}
.silde li:hover{border-color:#da0d0d;}
.silde li a{display: block; height: 100%; text-align: center; line-height: 186px;}
.silde li img{max-width: 100%; max-height: 100%; vertical-align: middle;}


.bottom-activity{position:fixed;bottom:0;z-index:10;width:100%;height:148px;background:#333; display: none; text-align: center;}
.bottom-activity .close{width:21px; height:21px; display: inline-block; position: absolute; right:-40px; top:10px; background:url(../images/bottom_bar/close.png) no-repeat;}
.bottom-activity .layout{position:relative;height:148px}
.bottom-activity .figure{position:absolute;bottom:0;left:-50px;width:256px;height:217px}
.bottom-activity .title{padding:20px 0 0 300px}
.bottom-activity .qrcode{padding-top:20px}
.bottom-activity .qrcode p{margin-top:5px;color:#a5a5a5;text-align:center}
.bottom-activity .qrcode li{margin-left:75px}

/**
 * 圆环进度
 */
.round-progress { width:44px; height:44px; line-height: 44px;text-align: center; background: url(../images/investjd.png); font-size:12px;  color:#666;}


// 侧边快捷功能按钮
.side-quick { position:fixed; width:40px; right:20px; bottom:20px; z-index:50;
    // a { position:relative;  @extend .iconfont; line-height: 50px; font-size:20px; text-align:center; margin-top:10px; display:block; background:$red; width:50px; height:50px; color:#fff; border-radius:100%; box-shadow:0 5px 10px rgba(100,100,100,0.2);
    //     &:hover { @include opacity90; }
    // }
    a { position:relative;  @extend .iconfont; line-height: 40px; font-size:20px; text-align:center; margin-top:5px; display:block; width:40px; height:40px; color:#fff; border-radius:4px; background:#000; @extend .boxshadow;
        &:hover { @include opacity90; }
    }
    // .to-top { @include opacity0; }
    .ph-num {   position:absolute; bottom: 5px; right: 60px; width: 130px; text-align: center; color: #fff; background: rgba(33,42,49,0.8); border-radius: 3px; height: 30px; line-height: 30px; padding:5px 10px; box-shadow: 0 8px 6px rgba(0,0,0,0.1); font-size: 18px; }
    .arrow-left { width: 0px; height: 0px; position: absolute; bottom: 17px; right: -6px; border-left: 6px solid rgba(33,42,49,0.8); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

    .ewm-img {  @include opacity0;  position:absolute; bottom: 5px; right: 70px; width: 230px; height:120px; text-align: center; color: #fff; background: rgba(33,42,49,0.8); border-radius: 3px; line-height: 20px; padding:10px 0; box-shadow: 0 8px 6px rgba(0,0,0,0.1); font-size: 14px;
        li { float:left; width:100px; margin-left:10px; text-align:center;
            img { width:100%; height:auto; }
        }
    }
    .arrow-left { width: 0px; height: 0px; position: absolute; bottom: 17px; right: -6px; border-left: 6px solid rgba(33,42,49,0.8); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
}
.popup-shadow20 { display:none; z-index:2000; position:fixed; top:0; left: 0;  width: 100%; height: 100%; background:url(../images/common/shadow20.png) repeat; }
// 理财计算器
.calculator { display:none; position:fixed; z-index:2100; width:400px; height:460px; top:50%; left:50%; margin:-240px 0 0 -210px;  background:url(../images/common/shadow40.png) repeat; border-radius:6px; padding:10px;
    .lay-cal { color: #000; background: #fff; padding:20px; height:420px; }
    .top { height: 30px; line-height: 30px; }
    .top .tel, .top .close { font-size: 16px; font-weight: 700; }
    .top .tel { float: left; padding-left: 10px; line-height: 30px; }
    .top a.close { float: right; filter: alpha(opacity=20); opacity: .2; color: #000; line-height: 20px; font-size:20px;}
    .top a.close:hover { filter: alpha(opacity=40); opacity: .4; text-decoration: none; }
    .tip { color: red; font-size: 13px; line-height: 20px; height: 20px; padding-top: 3px; text-align: center; }
    ul.cal { height: auto; padding: 0 20px 10px; font-size: 14px; }
    ul.cal li { padding-top: 15px; height: 30px; }
    span { display: inline-block; }
    span.l { width: 90px; text-align: right; float: left; line-height: 30px; }
    ul.cal li span.r { display: inline-block; height: 28px; overflow: hidden; border: 1px solid #c5c5c5; }
    span.r input.txt { width: 160px; height: 28px; padding: 0 5px; border: none; float: left; line-height: 28px; }
    span.r i { height: 28px; width: 20px; line-height: 20px; padding: 0 5px; font-style: normal; line-height: 28px; float: left; background: #eee; border-left: 1px solid #c5c5c5; display: inline-block; text-align: center; }
    select { height: 30px; line-height: 30px; width: 203px; font-size: 14px; border: 1px solid #c5c5c5; }
    .tocal,.tores { height: 30px; line-height: 30px; padding: 0 20px; border-radius:4px; color: #fff; display: inline-block; border: none; font-size: 14px; }
    a.tocal { background: $red; margin-right: 15px; }
    a.tocal:hover { @include opacity90; text-decoration: none; }
    a.tores { background: $gray; }
    a.tores:hover { @include opacity90; text-decoration: none; }
    h5 { height: 28px; line-height: 28px; border-top: 1px solid #999; font-size: 14px; color: #000; font-weight: 400; padding-left: 28px; }
    .tal { height: 30px; line-height: 30px; font-size: 14px; padding-left: 28px; display: none; }
    .tal span { color:$red; }
    div.cur { display: block; }
}